<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LayUI SwitchSelect 扩展示例</title>
    <!-- 引入 layui.css -->
    <link href="//unpkg.com/layui@2.11.5/dist/css/layui.css" rel="stylesheet">
    <style>
        body {
            padding: 50px;
        }

        .container {

        }
    </style>
</head>
<body>

<form class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">选择选项</label>
        <div class="layui-input-block">
            <div class="container" id="switchSelectDemo"></div>
        </div>
    </div>
</form>

<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.11.5/dist/layui.js"></script>
<script>

    layui.config({
        base: '../switchSelect/' // 根据实际情况修改路径
    }).extend({
        switchSelect: 'switchSelect',
    });

    layui.use(['switchSelect'], function () {
        let switchSelect = layui.switchSelect;

        // 初始化组件
        new switchSelect({
            elem: '#switchSelectDemo',                  // 容器元素
            data: {1: 'AAA', 2: 'BBB', 3: 'CCC'},       // 数据
            default: 1,                                 // 默认选中项
            name: 'name',                               // 表单name
            target: 'radio',                            // 默认样式 radio select
            onSwitch: function (target) {
                console.log('切换到:', target);
            }
        });
    });

</script>
</body>
</html>